<template>
  <!-- ↓↓↓ 升级会员弹窗 ↓↓↓ -->
  <el-dialog :before-close="close" center :visible.sync="show" :modal-append-to-body="false" width="896px" top="20vh"
    custom-class="vip_dialog">
    <div slot="title" class="pay_title">
      <div class="vip_info">
        <div class="avatar_box">
          <div class="avatar" :style="grade == 'FREE' ? 'border-color:#9c9da5' : ''">
            <el-avatar v-if="userInfo && userInfo.head_img" v-img="userInfo.head_img"
              :style="grade == 'FREE' ? 'border-color:#9c9da5' : ''" class="avatar_img" />
            <img v-else :style="grade == 'FREE' ? 'border-color:#9c9da5' : ''" class="avatar_img"
              src="@/assets/fastposter/user/no-person.png">
          </div>
        </div>
        <span>您当前是</span>
        <img v-if="grade == 'VIP'" class="vip_icon" src="@/assets/fastposter/vip/pay/vip.png" alt="">
        <img v-else-if="grade == 'SVIP'" class="vip_icon" src="@/assets/fastposter/vip/pay/svip.png" alt="">
        <img v-else-if="grade == 'EVIP'" class="vip_icon" src="@/assets/fastposter/vip/pay/evip.png" alt="">
        <img v-else class="vip_icon" src="@/assets/fastposter/vip/pay/free.png" alt="">
        <span class="grade" :style="grade == 'FREE' ? 'color:#9c9da5' : ''">{{ gradeName }}</span>
        <span>会员</span>
        <span v-if="grade !== 'FREE'" class="num">剩余{{ changeDate(userInfo.vip_days) }}</span>
      </div>
    </div>
    <PayBox />
  </el-dialog>

</template>
<script>
import { mapActions, mapGetters, mapState } from "vuex";
import PayBox from '../vip/payBox.vue'
// import { getIosSubscribe } from '@/api/api'
import http from '../../../api/fastposter'
export default {
  name: 'APay',
  components: { PayBox },
  props: {
    show: {
      type: Boolean,
      require: true
    }
  },
  data() {
    return {
      closeStatus: false,
      activeId: 'sem',
      showNewYear: false
    }
  },
  computed: {
    ...mapGetters({
      'grade': 'editor/grade',
      'gradeName': 'editor/gradeName'
    }),
    ...mapState({
      'userInfo': state => state.editor.user,
      'editor': state => state.editor,
    })
    // userInfo() {
    //   return this.$store.state.userInfo
    // }
  },
  created() {
    // this.checkIosSubscribe()
  },
  mounted() { },
  destroyed() {
    clearInterval(this.resultTime)
    clearInterval(this.countDateTime)
  },
  methods: {
    async checkIosSubscribe() {
      // const userId = localStorage.getItem('uid')
      // const res = await getIosSubscribe({
      //   userId
      // })
      // if (!res) {
      //   this.$message1('您已使用其他苹果账号订阅VIP包月会员，建议您在iTunes Store设置取消订阅后继续升级', undefined, 2500)
      // }
    },
    close() {
      if (this.closeStatus || !this.$store.state.hasCoupon || this.$store.state.isChildAccount) {
        clearInterval(this.resultTime)
        clearInterval(this.countDateTime)
        this.$emit('close')
      } else {
        this.$confirm('您还有抖券优惠未使用呢，您要放弃使用该优惠吗？', '', {
          confirmButtonText: '继续关闭',
          cancelButtonText: '考虑一下',
          center: true,
          cancelButtonClass: 'cancelButtonClass',
          confirmButtonClass: 'confirmButtonClass',
          customClass: 'giveUpPayDialog'
        })
          .then((_) => {
            clearInterval(this.resultTime)
            clearInterval(this.countDateTime)
            this.$emit('close')
          })
          .catch((_) => { })
        this.closeStatus = true
      }
    },
    openBook() {
      // this.$store.state.dialogProtocol = true
    },
    openActity() {
      this.$store.state.dialogActity = true
    },
    changeDate(date, type) {
      if (date <= 0) {
        return this.ToTime(this.userInfo.end_time * 1000)
      } else {
        return Math.floor(date) + '天'
      }
    },
    ToTime(second) {
      if (second < new Date().getTime()) {
        return '已过期'
      }
      const time = (second - new Date().getTime()) / 1000
      let result
      const m = parseInt(time / 60) % 60
      const h = parseInt(time / 3600) % 24
      if (h != 0) {
        result = h + '小时'
      }
      if (m != 0) {
        result += m + '分钟'
      }
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
.anim {
  animation: jiggle 1.5s ease-in infinite;
}

@keyframes jiggle {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.vip_change_btn {
  font-size: 16px;
  font-weight: 400;
  text-decoration: underline;
  text-align: center;
  color: #e6b595;
  line-height: 11px;
  position: relative;
  top: 20px;
  margin-left: 20px;
}

.saveMoney {
  font-size: 12px;
  font-weight: 400;
  color: #f3bf9e;
  margin-top: 6px;
}

.original-price {
  font-size: 16px;
  font-weight: 300;
  text-decoration: line-through;
  color: #f3bf9e;
  margin: 0;
}

.childTips {
  text-align: center;
  margin-top: 20px;

  span {
    background: rgba(255, 255, 255, 0.1);
    color: #face15;
    padding: 5px 20px;
    border-radius: 10px;
  }
}

.pay_title {
  display: flex;
  justify-content: space-between;
  color: #fff;

  .vip_info {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN-Light;

    .avatar_box {
      position: relative;
      margin-right: 6px;

      .avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 0.5px solid #ffd38c;

        .avatar_img {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          border: 0.5px solid #ffd38c;
        }
      }
    }

    .vip_icon {
      margin: 0 5px;
      width: 20px;
      height: 16px;
    }

    .grade {
      padding-right: 3px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      color: #ffd38c;
    }

    .num {
      padding-left: 19px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Light;
      color: #ffd38c;
    }
  }
}

/deep/ .el-dialog {
  background: transparent;
  border-radius: 16px;

  // position: absolute;
  // top: 0;
  // left: 0;
  // right: 0;
  // bottom: 0;
  // margin: auto !important;
  // height: 578px;
  // background: transparent;
  // border: none;
  // box-shadow: none;
  .el-dialog__header {
    position: relative;
    padding: 13px 15px 13px 21px;
    background-image: url('../../../assets/fastposter/vip/payBox/vipDialogBg.png');
    background-repeat: no-repeat;
    background-size: 105% 150%;
    background-position-x: -12px;
    // overflow-y: scroll;
  }

  .el-dialog__headerbtn {
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
  }

  .mce_dialog {
    border-radius: 0;
    overflow: hidden;

    .el-dialog__header {
      background-image: none;
      background: #f5f6fa;
      padding-top: 2px;

      .el-dialog__headerbtn {
        top: 20px;
      }
    }

    .el-dialog__body {
      border-radius: 0;
      padding: 25px 25px 30px;
    }
  }
}

/deep/.el-dialog--center .el-dialog__body {
  padding: 0;
  background: #f5f6fa;
  border-radius: 0px 0px 16px 16px;
  overflow: hidden;
}

.vip_select {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 160px;
}

.vip_selected_disabled {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

.dialog_vip_pay_info {
  width: 225px !important;
}

.change_price {
  position: absolute;
  right: -15px;
  top: -10px;
  background: #ea4071;
  color: #fff;
  font-size: 12px;
  padding: 5px;
  box-shadow: #ea4071;
  border-radius: 5px;
  line-height: 1;
  text-align: left;

  &::before {
    content: '.';
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 6px solid #ea4071;
    position: absolute;
    left: -2px;
    bottom: 0;
    color: #ea4071;
    line-height: 0.1;
  }
}

.coupon {
  display: flex;
  width: 231px;
  margin: 0 !important;
  position: relative;
  padding-top: 25px;
}

#main {
  width: 175px;
  height: 31px;
  z-index: 5000;
}

#main i {
  margin-top: 32px;
  margin-right: 5px;
  background: rgba(87, 96, 118, 1);
  color: #dcdfe6;
}

#content {
  display: flex;
  justify-content: space-between;
  padding: 0 30px 0 10px;
  width: 175px;
  height: 31px;
  line-height: 31px;
  padding-left: 10px;
  background: rgba(87, 96, 118, 1);
  border-radius: 2px;
  // border: 1px solid rgb(221, 221, 221);
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

#selectImg {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  background: #fff;
  color: #333;
  font-size: 16px;
}

#selectItem {
  // display: none;
  // border: 1px solid #eee;
  background: rgba(87, 96, 118, 1);
  position: absolute;
  z-index: 1000;
  width: 175px;
}

#selectItem ul {
  width: 175px;
  height: 100%;
  max-height: 135px;
  list-style: none;
  overflow-y: auto;
  margin-top: 10px;
}

#selectItem ul li {
  text-align: left;
  padding: 3px 10px;
  cursor: pointer;
  color: #fff;
}

#selectItem ul li:hover {
  background-color: rgba(0, 0, 1, 0.1);
}

.cou-div {
  display: flex;
  justify-content: space-between;

  .cou-name {
    font-weight: bold;
  }

  .cou-price {
    color: #ff3067;
  }
}

.zhaoDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.save-price {
  font-size: 12px;
  min-width: 250px;
  text-align: center;

  span {
    color: #f94951;
  }
}

.activity_book {
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 23px;
  background: #3299fc;
  border-radius: 11px;
  font-size: 12px;
  color: #ffffff;
}

.vip_bottom_tag {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 24px;
  background: linear-gradient(90deg, #ff944f, #fe434d);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  line-height: 20px;
}

.first_tips {
  display: flex;
  justify-content: space-between;
  font-size: 12px;

  &>p {
    color: #ffffff;

    &>span {
      color: #ff8d49;
    }
  }

  &>span {
    color: #84868b;
  }
}

.vip_card {
  flex-direction: column;
  position: relative;
  height: 70px;
  line-height: 1;
  padding: 0;
  color: #97999d;
  overflow: hidden;

  .vip_card_div {
    display: flex;
    align-items: center;
  }

  .vip_flag {
    font-weight: 700;
    color: #fff;
    font-size: 12px;
    background: linear-gradient(to right, #ea7e2f 40%, #f5bc57 100%);
    height: 14px;
    line-height: 14px;
    width: 70px;
    transform: rotate(-45deg);
    position: absolute;
    left: -15px;
    top: 13px;
    text-align: center;
  }
}

.vip_pro_select {
  &>span {
    color: #5f280c !important;
  }
}

.vip_select_tag {
  font-size: 14px;
  height: 22px;
  line-height: 22px;
}

.dialog_vip_pay_qrcode {
  width: 225px;
}

.show_bottom_tag {
  background: linear-gradient(135deg, #ff4f4f 0%, #ff7557 100%);
  height: 23px;
  border-radius: 0 0 5px 5px;
  background-size: 100%, 100%;

  &>span {
    position: absolute;
    right: 40px;
    font-size: 14px;
    font-style: italic;
    font-weight: bolder;
  }
}
</style>
